/*报名*/
<template>
  <div class="registrationInformation background" :style="{height: `${screenHeight}px`}">
    <div v-if="!showSuccess">
       <div class="registrationInformation-name">
            <mt-field label="微信昵称" :readonly="true" placeholder="请输入微信昵称" v-model="form.nickName" class="registrationInformation-name-border"></mt-field>
            <mt-field label="姓 名" :attr="{maxlength: 6}" placeholder="请输入姓名" v-model="form.realName" class="registrationInformation-name-border"></mt-field>
            <mt-field label="手 机 号" placeholder="请输入手机号" type="tel" v-model="form.mobile" class="registrationInformation-name-border"></mt-field>
            <mt-field v-if="requiredData.includes('年龄')" :attr="{maxlength: 2}" label="年 龄" placeholder="请输入年龄" type="number" v-model="form.age" class="registrationInformation-name-border"></mt-field>
            <mt-field v-if="requiredData.includes('微信号')" :attr="{maxlength: 20}" label="微 信 号" placeholder="请输入微信号" type="text" v-model="form.wechatNumber" class="registrationInformation-name-border"></mt-field>
            <mt-field v-if="requiredData.includes('QQ号') || requiredData.includes('qq号')" :attr="{maxlength: 10}" label="QQ 号" placeholder="请输入QQ号" type="number" v-model="form.qqNumber" class="registrationInformation-name-border"></mt-field>
            <mt-field v-if="requiredData.includes('身份证号')" :attr="{maxlength: 18}" label="身份证号" placeholder="请输入身份证号" type="text" v-model="form.idNumber" class="registrationInformation-name-border"></mt-field>
            <mt-field v-if="requiredData.includes('邮箱')" label="邮 箱" placeholder="请输入邮箱" type="email" v-model="form.email" class="registrationInformation-name-border"></mt-field>
            <mt-field v-if="requiredData.includes('地址')" label="地 址" placeholder="请输入地址" type="text" v-model="form.address" class="registrationInformation-name-border"></mt-field>
            <p v-if="requiredData.includes('性别')" class="registrationInformation-name-sex">
                <span>性 别</span>
                <input type="radio" v-model="form.sex" name="sex" value="MALE"/>男&nbsp;&nbsp;&nbsp;
                <input type="radio" v-model="form.sex" name="sex" value="FEMALE"/>女
            </p>
            <p v-if="requiredData.includes('婚姻状况')" class="registrationInformation-name-marital">
                <span>婚姻状况</span>
                <input type="radio" v-model="form.marital" name="marital" value="MARRIED"/>已婚&nbsp;&nbsp;&nbsp;
                <input type="radio" v-model="form.marital" name="marital" value="UNMARRIED"/>未婚&nbsp;&nbsp;&nbsp;
                <input type="radio" v-model="form.marital" name="marital" value="SECRECY"/>保密
            </p>
        </div>
        <div class="registrationInformation-remark">
            <mt-field label="备 注：" placeholder="请输入备注" type="textarea" rows="3" v-model="form.remark"></mt-field>
        </div>
        <div class="registrationInformation-payment">
            <div class="registrationInformation-payment-text">
                <p v-if="this.$route.params.cost && this.$route.params.cost>0">
                    <img src="@/assets/img/wechat@2x.png"><span> 支付<span style="color:red">￥{{this.$route.params.cost}}</span></span>
                </p>
            </div>
            <div class="registrationInformation-payment-btn" @click="submit">
                {{submitTitle}}
            </div>
        </div> 
    </div>
    <div v-else class="registrationInformation-success" :style="{height: `${screenHeights}px`}">
        <img v-if="isSuccessImg" src="@/assets/img/bmsuccess@2x.png">
        <img v-else style="width:30%" src="@/assets/img/bmfail@2x.png">
        <router-link :to="{ path:'/activityDetail', query: { id: this.$route.params.id}}">
            <div class="registrationInformation-success-btn">返回活动页</div>
        </router-link>
    </div>
  </div>
</template>

<script>
import { Field } from 'mint-ui';
import wx from 'weixin-jsapi'
import { registrationSave, getActivityDetailData, unifiedOrder, recordInfos, recordInfos2 } from '@/api/request.js';
import { setStore,getStore } from '@/assets/js/utils.js';

export default {
  name: 'registrationInformation',
  data() {
    return {
        requiredData:[], //必填项目
        submitTitle:'提交',
        form:{
            id:'',
            registrationId:this.$route.params.id,
            nickName:'',
            realName:'',
            mobile:'',
            age:'',
            wechatNumber:'',
            qqNumber:'',
            idNumber:'',
            email:'',
            address:'',
            sex:'',
            marital:''
        },
        showSuccess:false,
        isSuccessImg:false,
        user:{},
        userId:'',
        openid:'',
        remark:''
    }
  },
  computed: {
      screenHeight () {
        return window.innerHeight-40;
      },
      screenHeights () {
        return window.innerHeight-40;
      }
  },
  created(){
    let userId = getStore('userId')
    let user = getStore('user')
    if(userId && user){
      this.userId = userId;
      this.form.id = userId;
      this.form.nickName = user.nickname;
      this.openid = user.openid;
    }else{
        //跳转登录
        this.$router.push('/wxLogin')
    }
    if(!this.$route.params.id){
        this.$router.push('/')
    }else{
        this._recordInfos(userId,this.$route.params.id);
        this._getActivityDetailData(this.$route.params.id);
    }
  },
  mounted() {
    this.$store.commit('UPDATE_PAGE_TITLE', '报名信息')
    this.$store.commit('UPDATE_BACKSHOW', false)
    this.$store.commit('UPDATE_FOOTER', false)
  },
  methods: {
    //是否已经报过名
    _recordInfos(userId,registrationId){
        let that = this;
        recordInfos(userId,registrationId).then(res => {
            if (res.code == 1) {
                if(res.data && res.data.orderId){
                    that.submitTitle = '继续报名';
                    that._recordInfos2(res.data.orderId);
                }
            }
        }).catch(err => console.log(err))
    },
    _recordInfos2(orderId){
        let that = this;
        recordInfos2(orderId).then(res => {
            if (res.code == 1) {
                that.form.nickName= res.data.registrationUser.nickName || '';
                that.form.realName = res.data.registrationUser.realName || '';
                that.form.mobile = res.data.registrationUser.mobile || '';
                that.form. sex= res.data.registrationUser.sex || '';
                that.form.age= res.data.registrationUser.age || '';
                that.form.address= res.data.registrationUser.address || '';
                that.form.wechatNumber= res.data.registrationUser.wechatNumber || '';
                that.form.qqNumber= res.data.registrationUser.qqNumber || '';
                that.form.idNumber= res.data.registrationUser.idNumber || '';
                that.form.email= res.data.registrationUser.email || '';
                that.form.marital= res.data.registrationUser.marital || '';
            }
        }).catch(err => console.log(err))
    },
    //报名提交
    submit(){
        // console.log(JSON.stringify(this.form))
        if(!this.form.realName){
            this.$Toast('请输入姓名');
            return false;
        }else if(!this.form.mobile){
            this.$Toast('请输入手机号');
            return false;
        }else if(this.requiredData.includes('年龄') && !this.form.age){
            this.$Toast('请输入年龄');
            return false;
        }else if(this.requiredData.includes('微信号') && !this.form.wechatNumber){
            this.$Toast('请输入微信号');
            return false;
        }else if(this.requiredData.includes('QQ号') || this.requiredData.includes('qq号') && !this.form.qqNumber){
            this.$Toast('请输入QQ号');
            return false;
        }else if(this.requiredData.includes('身份证号') && !this.form.idNumber){
            this.$Toast('请输入身份证号');
            return false;
        }else if(this.requiredData.includes('邮箱') && !this.form.email){
            this.$Toast('请输入邮箱');
            return false;
        }else if(this.requiredData.includes('地址') && !this.form.address){
            this.$Toast('请输入地址');
            return false;
        }else if(this.requiredData.includes('性别') && !this.form.sex){
            this.$Toast('请输入性别');
            return false;
        }else if(this.requiredData.includes('婚姻状况') && !this.form.marital){
            this.$Toast('请输入婚姻状况');
            return false;
        }else{
            if(/^1[3456789]\d{9}$/.test(this.form.mobile) == false){
                this.$Toast("请输入正确的手机号");
                return false;
            }else if(this.form.email && /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.form.email) == false){
                this.$Toast("请输入正确的邮箱号");
                return false;
            }else if(this.form.idNumber && /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.form.idNumber) == false){
                this.$Toast("请输入正确的身份证号");
                return false;
            }else{
                let that = this;
                registrationSave(this.form).then(res => {
                    if (res.code == 1) {
                        if(res.data.cost === 0){
                            that.showSuccess = true;
                            that.isSuccessImg = true;
                        }else{
                            that._unifiedOrder(res.data.orderId);
                        }
                    }else{
                        that.$Toast(res.msg)
                    }
                }).catch(err => console.log(err))
            }
        }  
    },
    //获取必填项
    _getActivityDetailData(id){
        let that = this;
        getActivityDetailData(id).then(res => {
            if (res.code == 1) {
                if(res.data.mandatoryInformation.length>0){
                    that.requiredData = res.data.mandatoryInformation.split(',')
                }
            }
        }).catch(err => console.log(err))
    },
    //生成订单
    _unifiedOrder(orderId){
        let that = this;
        unifiedOrder(this.openid,orderId,this.userId).then(res => {
            if (res.code == 1) {
                this.onBridgeReady(res.data)
            }else{
                that.$Toast(res.msg)
            }
        }).catch(err => console.log(err))
    },
    //支付
    onBridgeReady(data){
        let that= this;
           if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                // onBridgeReady();
            }
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId": data.appId, //公众号名称，由商户传入
                    "timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
                    "nonceStr": data.nonceStr, //随机串
                    "package": data.package,
                    "signType": data.signType, //微信签名方式:
                    "paySign": data.paySign
                },
                function (res) {
                    that.showSuccess = true
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        that.isSuccessImg = true;
                    }
                    if (res.err_msg == "get_brand_wcpay_request:cancel") {
                        that.isSuccessImg = false;
                        that.$Toast('已取消支付')
                    }
                    if (res.err_msg == "get_brand_wcpay_request:fail") {
                        that.isSuccessImg = false;
                    }
                }
            );
    }


  },
  components: {
      "mt-field":Field
  }
}
</script>
<style scoped lang="scss">
    .registrationInformation{
        position: relative;
        margin-top: 40px;
        padding-bottom: 45px;
        &-name{
            border-radius: 20px;
            margin: 10px;
            &-border{
                border-bottom:1px solid #ddd
            }
            &-sex{
                span{
                    display: inline-block;
                    width: 20%;
                    padding: 14px 5% 14px 15%;
                }
                background-color: white;
                font-size:16px;
                text-align:left;
                border-bottom: 1px solid #ddd;
            }
            &-marital{
                span{
                    display: inline-block;
                    width: 20%;
                    padding: 14px 0 14px ;
                    margin: 0 5% 0 7%;
                }
                background-color: white;
                font-size:16px;
                text-align:left;
            }
        }
        &-remark{
            margin: 10px;
            border-radius: 20px;
        }
        &-payment{
            position: fixed;
            bottom: 0px;
            width:100%;
            height:55px;
            line-height: 55px;
            background-color: white;
            display: flex;
            text-align: center;
            &-text{
                flex:2;
                img{
                    width:30px;
                    position: relative;
                    top: 6px;
                }
            }
            &-btn{
                flex:1;
                background-color: #FEBF00;
                color: white;
                font-weight: bold;
            }

        }
        &-success{
            padding: 50px 20px;
            img{
                width:60%;
            }
            a{
                text-decoration: none;
            }
            &-btn{
                background-color: #FEBF00;
                color:white;
                font-weight: bold;
                margin:50px auto;
                font-size: 18px;
                padding: 5px 10px;
                border-radius: 20px;
                width:80%;
            }
        }
    }
</style>
